<template>
	<view class="content">
		<view class="poster-box y-f" v-if="poster.finalPath">
			<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
			<view class="share-box df-yc my20">
				<text class="fs24 text" style="color:#5F6F80;margin:40rpx 0 56rpx 0;">好友扫码注册成为会员，你将获得茶多酚奖励</text>
				<view class="share-list-box x-f">
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn share-item y-f" open-type="share">
						<!-- <image class="share-img" :src="$IMG_URL + '/imgs/share_wx.png'" mode=""></image> -->
						<button style="background-color: #2AB153;" class="icon df-c">
							<u-icon name="weixin-fill" color="#ffffff" size="54"></u-icon>
						</button>
						<text class="share-title fb mt20">微信好友</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="share-item y-f" @tap="share">
						<button style="background-color: #2AB153;" class="icon df-c">
							<u-icon name="weixin-fill" color="#ffffff" size="54"></u-icon>
						</button>
						<!-- <image class="share-img" :src="$IMG_URL + '/imgs/share_wx.png'" mode=""></image> -->
						<text class="share-title fb mt20">微信好友</text>
					</view>
					<!-- #endif -->
					<view class="share-item y-f" @tap="saveImage">
						<button style="background-color: #BE915C;" class="icon df-c">
							<u-icon name="download" color="#ffffff" size="54"></u-icon>
						</button>
						<text class="share-title fb mt20">保存图片</text>
					</view>
					<!-- <view class="share-item y-f" @tap="copyLink">
						<image class="share-img" :src="$IMG_URL + '/imgs/share_link.png'" mode=""></image>
						<text class="share-title">复制链接</text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="goods_poster"
				:style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/common/utils/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
	import {
		BASE_URL
	} from '@/env.js';
	import shoproShare from '@/common/mixins/shopro-share';
	// #ifdef H5
	import wxsdk from '@/common/wechat/sdk';
	// #endif
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	let timer = null;
	export default {
		components: {},
		mixins: ['shoproShare'],
		data() {
			return {
				poster: {},
				canvasId: 'goods_poster',
				scene: '',
				goodsInfo: {}
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				shareData: state => state.init.initData.share
			})
		},
		props: {
			goodsId: 0
		},
		async created() {
			let that = this;
			let goodsInfo = that.getGoodsDetail().then(res => {
				that.setShareInfo({
					title: that.goodsInfo.title,
					image: that.goodsInfo.image,
					query: {
						u: 'goods-' + that.$Route.query.id
					}
				});
				if (that.shareInfo) {
					timer = setTimeout(function() {
						that.$emit('getShareInfo', that.shareInfo);
						that.scene=that.$tools.splitScene(that.shareInfo.path.split('?')[1],'u','s')
						that.scene = encodeURIComponent(that.scene);
						that.shareFc();
					}, 100);
				}
			});
		},
		methods: {
			// 商品详情
			getGoodsDetail() {
				let that = this;
				uni.showLoading({
					title: '加载数据中'
				});
				return new Promise((resolve, reject) => {
					that.$api('goods.detail', {
						id: that.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							uni.hideLoading();
							that.goodsInfo = res.data;
							resolve(that.goodsInfo);
						}
					});
				});
			},
			async shareFc() {
				let that = this;
				try {
					// console.log('准备生成:' + new Date());
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						// type: 'goodsPoster',
						backgroundImage: that.$tools.checkImgHttp(that.shareData.goods_poster_bg), //接口返回的背景图
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						drawDelayTime: 500, //draw延时时间
						// background: {
						// 		width: 1080,
						// 		height: 1920,
						// 		backgroundColor: '#666'
						// 	},
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.042;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									// {
									// 	type: 'custom',
									// 	setDraw(Context) {
									// 		Context.setFillStyle('black');
									// 		Context.setGlobalAlpha(1);
									// 		Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
									// 		Context.setGlobalAlpha(1);
									// 	}
									// },
									{
										type: 'image', //头像
										url: that.$tools.checkImgHttp(that.userInfo
											.avatar),
										alpha: 1,
										dy: bgObj.width * 0.06,
										infoCallBack(imageInfo) {
											let scale = (bgObj.width * 0.1) / imageInfo
												.height;
											return {
												circleSet: {
													x: (imageInfo.width * scale) / 2,
													y: (bgObj.width * 0.1) / 2,
													r: (bgObj.width * 0.1) / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dx: bgObj.width * 0.1 - imageInfo.width *
													0.5 * scale,
												dWidth: imageInfo.width *
													scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.1
												/* roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													} */
											};
										}
									},
									{
										type: 'text', //昵称
										// fontStyle: 'italic',//倾斜
										text: that.userInfo.nickname,
										size: fontSize,
										color: 'black',
										alpha: 1,
										textAlign: 'middle',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width * 0.2,
												dy: bgObj.width * 0.08
											};
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text', //昵称
										// fontStyle: 'italic',//倾斜
										text: '推荐一个好物给你,请查收！',
										size: fontSize * 0.9,
										color: 'black',
										alpha: 1,
										textAlign: 'middle',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width * 0.2,
												dy: bgObj.width * 0.15
											};
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'image', //商品图片
										url: that.$tools.checkImgHttp(that.goodsInfo
											.image),
										alpha: 1,
										drawDelayTime: 800, //draw延时时间
										dx: bgObj.width * 0.052,
										dy: bgObj.width * 0.22,
										infoCallBack(imageInfo) {
											return {
												dWidth: bgObj.width * 0.9,
												dHeight: bgObj.width * 0.9
												// roundRectSet: { // 圆角矩形
												// 	r: bgObj.width * 0.025
												// }
											};
										}
									},
									{
										type: 'text', //标题
										// fontStyle: 'italic',//倾斜
										text: that.goodsInfo.title,
										size: fontSize,
										color: 'black',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										fontWeight: 'bold',
										lineFeed: {
											//换行
											maxWidth: bgObj.width * 0.89,
											lineHeight: bgObj.width * 0.07,
											lineNum: 2,
											dx: -1
										},
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width * 0.052,
												dy: bgObj.width * 1.17
											};
										},
										serialNum: 0
									},
									{
										type: 'text', //价格
										// fontStyle: 'italic',//倾斜
										text: `￥${that.goodsInfo.price}`,
										size: fontSize * 1.1,
										color: '#E1212B',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										fontWeight: 'bold',
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width * 0.052,
												dy: bgObj.width * 1.32
											};
										},
										serialNum: 0
									},
									{
										type: 'text', //价格
										// fontStyle: 'italic',//倾斜
										text: `￥${that.goodsInfo.original_price}`,
										size: fontSize * 0.9,
										color: '#999999',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineThrough: {
											style: '#999999'
										},
										infoCallBack(textLength) {
											_app.log(
												'index页面的text的infocallback ，textlength:' +
												textLength);
											return {
												dx: bgObj.width * 0.3,
												dy: bgObj.width * 1.32
											};
										},
										serialNum: 0
									},
									// #ifdef MP-WEIXIN
									{
										type: 'image', //微信小程序码
										url: `${that.$API_URL}addons/shopro/wechat/wxacode?scene=${that.scene}`,
										alpha: 1,
										drawDelayTime: 500, //draw延时时间
										dx: bgObj.width * 0.948 - bgObj.width * 0.2,
										dy: bgObj.height - bgObj.width * 0.052 - bgObj.width * 0.2,
										infoCallBack(imageInfo) {
											return {
												dWidth: bgObj.width * 0.2,
												dHeight: bgObj.width * 0.2
												// roundRectSet: { // 圆角矩形
												// 	r: imageInfo.width * 0.025
												// }
											};
										}
									},
									// #endif
									// #ifndef MP-WEIXIN
									{
										type: 'qrcode',
										text: `${that.shareInfo.path}`,
										size: bgObj.width * 0.16,
										dx: bgObj.width * 0.948 - bgObj.width * 0.18,
										dy: bgObj.height - bgObj.width * 0.052 - bgObj
											.width * 0.16
									}
									// #endif
								]);
							});
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					// console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
					// this.poster.finalPath = d.poster.tempFilePath;
					this.$set(this.poster, 'finalPath', d.poster.tempFilePath);
					if(d.poster.errMsg=='canvasToTempFilePath:ok'){
						this.$store.commit('updateOnPosterStatus',1)
					}
				} catch (e) {
					this.$store.commit('updateOnPosterStatus',1)
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					// console.log(JSON.stringify(e));
				}
			},
			// 保存图片
			async saveImage() {
				let that = this;
				console.log(that.poster.finalPath)
				let platform = uni.getStorageSync('platform');
				let checkPermission = await that.$tools.checkAppAlbum();
				if (platform === 'wxOfficialAccount') {
					that.$tools.toast('长按图片保存');
				} else if (checkPermission) {
					uni.saveImageToPhotosAlbum({
						filePath: that.poster.finalPath,
						success: res => {
							that.$tools.toast('保存成功');
						},
						fail: err => {
							that.$tools.toast('保存失败');
						}
					});
				}
			},
			// 分享
			share() {
				let that = this;
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: that.shareInfo.path,
					title: that.shareInfo.title,
					summary: that.shareInfo.title,
					imageUrl: that.shareInfo.imageUrl,
					success: res => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif
				// #ifdef H5
				wxsdk.share({
						title: that.shareInfo.title,
						path: that.shareInfo.path,
						imageUrl: that.shareInfo.imageUrl
					},
					res => {
						that.$tools.toast('分享成功');
					}
				);
				// #endif
			},
			copyLink() {
				let that = this;
				uni.setClipboardData({
					data: that.shareInfo.copyLink,
					success: () => {
						//#ifdef H5
						that.$tools.toast('已复制到剪切板');
						//#endif
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.content {
		background: #fff;
		position: relative;
		width: 100%;

		.bg_img {
			width: 100%;
			height: 100%;
		}

		.poster-box {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 50rpx;

			.posterImage {
				width: 680rpx;
				box-shadow: 0px 9rpx 26rpx 6rpx rgba(190, 190, 190, 0.31);
				border-radius: 35rpx;
				overflow: hidden;
			}
		}
	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.share-box {
		width: 690rpx;
		height: 310rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 59rpx 0px rgba(153, 153, 153, 0.2);
		border-radius: 20rpx;

		.share-list-box {
			width: 100%;

			.share-btn {
				background: none;
				border: none;
				line-height: 1;
				padding: 0;

				&::after {
					border: none;
				}
			}

			.share-item {
				flex: 1;
				padding-bottom: 20rpx;

				button {
					width: 88rpx;
					height: 88rpx;
					background: #BE915C;
					border-radius: 50%;
				}

				button::after {
					border: none;
				}

				.share-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}

				.share-title {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>
